<template>
  <div class="person">
    <h2>汽车信息：一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
    <button @click="changePrice"> +10 修改汽车的价格</button>
    <button @click="changCar"> 修改汽车</button>
    <br>
    <h2> 当前求和 ： {{ sum }}</h2>
    <button @click="changeSum">点我求和+1</button>
    <hr>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>

<script lang="ts" setup >
import { ref , reactive} from 'vue'

// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let sum = ref(0)


// 方法
function changePrice() {
    car.price += 10
    // console.log(car.price)
}

function changeSum() {
  // 对于 ref 定义的基本类型数据， 只能通过 .value 修改 
    sum.value += 1
}


function changCar() {
    //  这样写是不行的，相当于直接覆盖修改了car 这个引用 
    // car = reactive({ brand: '奥迪100', price: 200 })
    
    
    // 注意 reactive 定义的对象类型的数据， 不能整体替换
    // 只能修改对象内部的属性
    // car.brand = '奥迪A6'
    //  如果要整体替换， 只能使用  Object.assign() 方法
    Object.assign(car, { brand: '奥迪A6', price: 200 })
    console.log(car)
}

</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>